<template>
  <div class="peopleList_r">
    <w-breadcrumb style="font-size: 14px; margin-left: 5px" separator="/">
      <w-breadcrumb-item>员工管理</w-breadcrumb-item>
      <w-breadcrumb-item>员工列表</w-breadcrumb-item>
    </w-breadcrumb>
    <w-button
      class="add_people"
      size="mini"
      type="primary"
      @click="addFormVisible = true"
      >添加员工</w-button
    >
    <w-dialog
      style="width: 800px; margin: 20px auto; text-align: center"
      title="员工信息"
      :visible.sync="addFormVisible"
    >
      <w-form v-model="addPeopleList" class="people_form">
        <w-form-item label="姓名" :label-width="formLabelWidth">
          <w-input v-model="addPeopleList.name"></w-input>
        </w-form-item>
        <w-form-item
          style="width: 240px"
          label="岗位"
          :label-width="formLabelWidth"
        >
          <w-select v-model="addPeopleList.position">
            <w-option label="快递员" value="快递员"></w-option>
            <w-option label="运输员" value="运输员"></w-option>
            <w-option label="揽件员" value="揽件员"></w-option>
          </w-select>
        </w-form-item>
        <w-form-item label="所在地" :label-width="formLabelWidth">
          <w-input v-model="addPeopleList.location"></w-input>
        </w-form-item>
        <w-form-item label="手机号" :label-width="formLabelWidth">
          <w-input v-model="addPeopleList.phone"></w-input>
        </w-form-item>
      </w-form>
      <div slot="footer" class="dialog-footer">
        <w-button type="primary" @click="submitPeople">提交添加</w-button>
      </div>
    </w-dialog>
    <div>
      <w-table
        :default-sort="{ prop: 'name', order: 'descending' }"
        class="people_table"
        ref="multipleTable"
        :data="
          peopleList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        tooltip-effect="dark"
        style="width: 100%"
      >
        <w-table-column prop="name" label="姓名" sortable width="120px">
        </w-table-column>
        <w-table-column prop="id" label="ID" width="120"> </w-table-column>
        <w-table-column prop="position" label="岗位" width="120px">
        </w-table-column>
        <w-table-column prop="totalWorkingAmount" label="总单量" width="120px">
        </w-table-column>
        <w-table-column prop="location" label="所在地" width="120px">
        </w-table-column>
        <w-table-column prop="phone" label="手机号" width="160px">
        </w-table-column>
        <w-table-column label="操作">
          <template slot-scope="scope">
            <w-button size="mini" @click="handlePeopleEdit(scope.row)"
              >编辑</w-button
            >

            <w-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.id)"
              >删除</w-button
            >
          </template>
        </w-table-column>
      </w-table>
    </div>
    <w-dialog
      style="width: 800px; margin: 20px auto; text-align: center"
      title="员工信息"
      :visible.sync="dialogFormVisible"
    >
      <w-form v-model="peopleList" class="people_form">
        <w-form-item label="姓名" :label-width="formLabelWidth">
          <w-input v-model="selectedPerson.name"></w-input>
        </w-form-item>
        <w-form-item
          style="width: 240px"
          label="岗位"
          :label-width="formLabelWidth"
        >
          <w-select v-model="selectedPerson.position">
            <w-option label="快递员" value="快递员"></w-option>
            <w-option label="运输员" value="运输员"></w-option>
            <w-option label="揽件员" value="揽件员"></w-option>
          </w-select>
        </w-form-item>
        <w-form-item label="所在地" :label-width="formLabelWidth">
          <w-input v-model="selectedPerson.location"></w-input>
        </w-form-item>
      </w-form>
      <div slot="footer" class="dialog-footer">
        <w-button type="primary" @click="closeEdit(selectedPerson.id)"
          >提交修改</w-button
        >
      </div>
    </w-dialog>
    <w-pagination
      class="people_bottom"
      @current-change="current_change"
      :current-page="currentPage"
      small
      background
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="peopleList.length"
    >
    </w-pagination>
  </div>
</template>

<script>
export default {
  name: "PeopleList",
  data() {
    return {
      activeName: "first",
      currentPage: 1,
      pageSize: 6,
      peopleList: [],
      addPeopleList: {
        name: "",
        phone: "",
        position: "",
        location: "",
      },
      formLabelWidth: "60px",
      dialogFormVisible: false,
      selectedPerson: {
        id: "",
        name: "",
        position: "",
        totalWorkingAmount: "",
        location: "",
        phone: "",
      },
      addFormVisible: false,
    };
  },
  methods: {
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
    handleDelete(index, id) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "GET",
            url: "http://1.15.170.222:88/api/manage/employee/delete/" + id,
          }).then((response) => {
            console.log(response);
            this.msg = response.data.msg;
            if (this.msg === "success") {
              index += (this.currentPage - 1) * this.pageSize;
              var isLast = false;
              if (
                this.currentPage ===
                Math.ceil(this.peopleList.length / this.pageSize)
              ) {
                isLast = true;
              }
              this.peopleList.splice(index, 1);
              if (isLast && this.peopleList.length % this.pageSize === 0) {
                this.currentPage--;
              }
            } else if (this.code === 500) {
              this.$alert("服务器内部错误", "提示", {
                confirmButtonText: "确定",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handlePeopleEdit(row) {
      this.dialogFormVisible = true;
      this.selectedPerson.id = row.id;
      this.selectedPerson.name = row.name;
      this.selectedPerson.location = row.location;
      this.selectedPerson.position = row.position;
      this.selectedPerson.phone = row.phone;
      this.selectedPerson.totalWorkingAmount = row.totalWorkingAmount;
    },
    async closeEdit(id) {
      const uid = localStorage.getItem("uid");
      await this.$axios({
        method: "POST",
        url: "http://1.15.170.222:88/api/manage/employee/update/",
        data: {
          id: id,
          uid: uid,
          position: this.selectedPerson.position,
          location: this.selectedPerson.location,
          name: this.selectedPerson.name,
          totalWorkingAmount: this.selectedPerson.totalWorkingAmount,
          phone: this.selectedPerson.phone,
        },
      }).then((response) => {
        console.log(response);
      });
      this.dialogFormVisible = false;
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/manage/employee/list",
      }).then((response) => {
        console.log(response);
        this.peopleList = response.data.data;
        let code = response.data.code;
        if (code === 500) {
          this.$alert("服务器内部错误", "提示", {
            confirmButtonText: "确定",
          });
        } else {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
    },
    async submitPeople() {
      const uid = localStorage.getItem("uid");
      if(this.addPeopleList.phone != '' && this.addPeopleList.location != '' && this.addPeopleList.position != '' && this.addPeopleList.name != ''){
      await this.$axios({
        method: "POST",
        url: "http://1.15.170.222:88/api/manage/employee/insert",
        data: {
          uid: uid,
          location: this.addPeopleList.location,
          position: this.addPeopleList.position,
          name: this.addPeopleList.name,
          phone: this.addPeopleList.phone,
        },
      }).then((response) => {
        console.log(response);
        let code = response.data.code;
        if(code === 500){
          this.$alert("服务器内部错误", "提示", {
                confirmButtonText: "确定",
          });
        }else {
          this.$alert("添加成功", "提示", {
                confirmButtonText: "确定",
          });
        }
      });
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/manage/employee/list",
      }).then((response) => {
        console.log(response);
        this.peopleList = response.data.data;
      });
      this.addFormVisible = false;
      this.addPeopleList = "";
      }else {
        this.$alert("请输入完整", "提示", {
          confirmButtonText: "确定",
        });
      }
    },
  },
  mounted() {
    this.$axios({
      method: "GET",
      url: "http://1.15.170.222:88/api/manage/employee/list",
    }).then((response) => {
      console.log(response);
      this.peopleList = response.data.data;
    });
  },
};
</script>

<style>
.peopleList_r {
  padding-top: 40px;
  padding-left: 83px;
  display: flex;
  flex-direction: column;
  width: 1050px;
  height: 680px;
}
.people_table {
  margin-top: 30px;
  margin-bottom: 40px;
  font-size: 14px;
  border-bottom: 0;
}
.people_bottom {
  text-align: center;
  border-top: 0;
}
.add_people {
  font-size: 13px;
  margin: 5px 0 0 860px;
  width: 100px;
}
/* .el-table::before {
  height: 0;
} */
.people_form {
  height: 260px;
  margin-right: 15px;
  margin-top: 10px;
}
</style>
